<template>
	<yd-layout id='set' class=''>
		<div class="list_img ">
			<span>头像</span>
			<div class="list_right">
				<el-upload
				  class="upload-demo"
				  :action="qiNiuAction"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :before-remove="beforeRemove"
				  :show-file-list='false'
				  :on-success="onSuccess"
				  multiple
					accept='image/*' 
				  :limit="1"
				  :on-exceed="handleExceed"
				  :file-list="fileList">
				  <div>
				  	<img :src="imgUrl" alt="" />
				  </div>
				</el-upload>
				
				<i class="i"></i>
			</div>
		</div>
		<div class="list_content" @click="openPop">
			<span>昵称</span>
			<div class="list_right">
				<div>{{dataObj.nick_name}}</div>
				<i class="i"></i>
			</div>
		</div>
		<div class="list_content" style="border-bottom: .2rem solid #FAFAFA;">
			<span>手机号</span>
			<div >{{dataObj.username}}</div>
		</div>
		<div @click="loginOut" class="out_btn c_size_34_48">退出登录</div>
		<yd-popup v-model="showPop" position="center" :close-on-masker='false'>
			<div class="pop_nike_name">
				<div class="title c_size_34_48">编辑昵称</div>
				<div class="pop_nike_name_input">
					<input placeholder="昵称最多15个字符" oninput="if(value.length>11)value=value.slice(0,11)"  type="text" v-model="nikeName" />
				</div>
				<ul class="c_size_34_48">
					<li @click="showPop=false">取消</li>
					<li @click="update(false)" >确定</li>
				</ul>
			</div>
        </yd-popup>
	</yd-layout>
</template>

<script>
	import { Upload } from 'element-ui';
	import {Popup} from 'vue-ydui/dist/lib.rem/popup';
	export default{
		components:{
			[Upload.name]:Upload,
			[Popup.name]:Popup,
		},
		data(){
			return {
				fileList: [
				
			   	],
			   	dataObj:{},
			   	qiNiuAction:'',
			   	imgUrl:'',
			   	showPop:false,
			   	nikeName:'',
			}
		},
		created() {
			
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			this.getMine()
			this.getToken();
		},
		methods:{
			openPop(){
				this.showPop=true;
				this.nikeName = this.dataObj.nick_name
			},
			getMine(){
				this.$root.ajax({
					name:'my',
					params:{
						
					}
				}).then((d)=>{
					this.imgUrl=d.data.avatar
					this.dataObj=Object.assign({},this.dataObj,d.data)
				})
			},
			update(obj){
				var params={}
				if(obj){
					params=obj
				}else{
					params={
						field:'nick_name',
						value:this.nikeName
					}
				}
				return new Promise((resolve,reject)=>{
					this.$root.ajax({
						name:'my/modify',
						params:params
					}).then((d)=>{
						this.showPop=false
						//this.getMine()
						this.dataObj=Object.assign({},this.dataObj,{[params.field]:params.value})
						if(params.field == 'avatar'){
							this.imgUrl = params.value
						}
						this.$dialog.toast({
							mes: '编辑成功',
							timeout: 1500
						});
					})
				})
				
			},
			//获取七牛token
			getToken(){
				this.$root.ajax({
					name:'file/token',
					type:'get',
					params:{
						
					}
				}).then((d)=>{
					this.qiNiuAction='https://up-z1.qiniup.com?token='+d.data;
				})
			},
			onSuccess(resp, file, fileList){
				if(resp.hash) {
					this.imgUrl=this.$root.config.qi_niu_img_url+resp.hash
					console.log(this.imgUrl)
					this.fileList=[]
					this.update({
							field:'avatar',
							value:this.imgUrl
					}).then(()=>{
						//this.getMine()
						this.$dialog.toast({
							mes: '图片上传成功',
							timeout: 1500
						});
					})
						
				} else {
					this.$nextTick(() => {
						this.$dialog.toast({
							mes: '图片上传失败,请重新选择！！',
							timeout: 1500
						});
					})
				}
			},
			handleExceed(){
				
			},
			beforeRemove(){
				
			},
			handleRemove(){
				
			},
			handlePreview(){
				
			},
			loginOut(){
				this.$dialog.confirm({
                    title: '温馨提示',
                    mes: '是否确认退出登录？',
                    opts: [
                    	{
                            txt: '确定',
                            color: '#999999',
                            callback: () => {
                            	this.$root.ajax({
									name:'Login/logOut',
									params:{
										
									}
								}).then((d)=>{
									sessionStorage.setItem('wst_userInfo','')
									localStorage.setItem('wst_userInfo','')
									this.$router.push({
										name:'login',
										query:{
											historyUrl:'set'
										}
									})
								})
                      		},
                    	},
                        {
                            txt: '取消',
                            color: '#35BF7E',
                            callback: () => {

                            }
                        },
                    ]
                });
			}
		}
	}
</script>

<style lang="scss">
	@import './set.scss';
</style>